<%@page import="tianqi.entity.UserY"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	System.out.println("basePath: "+basePath);
	
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>优个网</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/serviceTQ.css">
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    	<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.3.js"></script>
    	<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
    	<script type="text/javascript" charset="utf-8" src="js/jquery.form.js"></script>
	</head>
<body style="background: #d8d8d8;" onunload="close();">
    <div class="container clear" style="width:1211px;margin:0 auto;">
        <div class="col-md-5 col-md-offset-4">
         <h1>田奇 - 联系客服模块</h1>
        </div>
    </div>
    <div id="content" class="container clear">
        <div class="lf" id="left">
            <div class="ltop">
                <div class="mark2 lf"><img id="tx" width="45" height="45" style="border-radius:50%;" src="${user.txImg }"></img></div>
                <p class="lf"><a href="#" style="color:#fff;">${user.uname }</a></p>
                
            </div>
            <div class="lbott">
                <ul>
                    <li class="clear">
                        <img class="lf" src="img/edit.png" alt="" width="32" height="32" style="position: relative;top: 18px;left: 6px;"/>
                        <p class="lf" style="color: #FFF;font-size: 15px;position: relative;top: 18px;left: 16px;" >客服人员</p>
                    </li>
                </ul>
            </div>


        </div>
        <div id="right" class="lf">
            <div class="rtop clear">
                <img src="img/GF.png" alt="" class="lf" style="margin: 8px 8px;"/>
                <p class="lf" style="margin-left: 5px;margin-top: 7px;">田奇-项目组</p>
            </div>

        </div>
        <div id="lt" class="lf rmiddle">

        </div>
        <div class="lf rbott">
            <div id="div"></div>
            <a class="btn btn-success" href="javascript:send();">发送</a>
        </div>




    </div>
    <script type="text/javascript" src="js/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor2 = new E('#div')
        editor2.customConfig.uploadImgShowBase64 = true ;
        editor2.create();
        $('#div').children('div').eq(1).css({height:"195px",backgroundColor:'#FFF'});
        $('#div').children('div').eq(1).children('div').css({color:'#000'});
        
        var socket=null;
        
        function con(){
        	
        	connection("ws://localhost:8080/TianQi/ws?${user.uname}=${user.txImg}");
        	socket.onmessage=function(res){
        		console.log(res.data);
        		var d=$.parseJSON(res.data);
        		if(d.txImg=='' || d.txImg==null || !d.txImg){
        			$("#lt").append(
    						"<div class='clear' style='color: #e4393c;font-size: 12px;margin-top: 5px auto;text-align:center;'>"
    						+ " 系统消息 : "
    						+d.name+ d.msg+ "</div>");
        		}else{
        			$("#lt").append(
    						"<div style='width:616px; color: #e4393c;font-size: 12px;margin-top: 3px;margin-left: 0px;' class='lf clear'>"
    						+'<div class="mark1 lf">'
	 						+'<img id="touxiang" width="45" height="45" style="border-radius:50%;" src="'+d.txImg+'"></img>'
	 						+"</div>"
    						+ d.name
    						+ " 说: "
    						+"<div style='margin-left:25px;'>"+ d.msg+ "</div></div>");
        		}
        	}
        }
        function send(){
        	var s=editor2.txt.html();
        	$("#lt").append(
					"<div style='width:616px; color: #000;font-size: 12px;margin-top: 3px;' class='rt'>"
					+'<div class="mark3 rt">'
	 						+'<img id="touxiang" width="45" height="45" style="border-radius:50%;" src="${user.txImg}"></img>'
	 						+"</div>"
					+"<div class='rt' style='text-align:right;margin-right:15px;'>"+ "我 说: "
					+ s+ "</div></div>");
        	socket.send(s);
        }
        function close(){
        	socket.close();
        }
        
        function connection(host){
        	alert('WebSocket' in window);
        	if('WebSocket' in window){
        		socket=new WebSocket(host);
        	}else if('MozWebSocket' in window){
        		socket=new MozWebSocket(host);
        	}else{
        		alert("你的浏览器 不支持此功能 建议升级至更高版本");
        		return;
        	}
        }
        $(function(){ 
        	con();
        });
        
        
        
      //上传头像 图片
        function txtx(){
        	alert("上传头像");
        	var option = {
        			url:"${pageContext.request.contextPath}/uplodeImg.tq",//一旦指定了url那么表单中的action的url就被覆盖了，如果不指定url就用表单的原有的url
        			dataType:"text",
        			data:{
        				fileName:"imgsFile"
        			},
        			success:function(responseText){
        				//把json格式的字符串解析成json对象
        				var jsonObj = $.parseJSON(responseText);
        				if(jsonObj.relativePath == "error"){
        					alert("请选择文件");
        					return;
        				}
        				//$(".mark").html('<img id="touxiang" width="90" height="90" style="border-radius:50%;" title="头像" src="'+jsonObj.relativePath+'?d='+new Date()+'">');
        				$("#tx").attr('src',jsonObj.relativePath+'?d='+new Date());
        				saveTX(jsonObj.relativePath);
        				//$(".mark").css("background-image","url("+jsonObj.relativePath+")")
        				
        				alert($("#tx").attr('src'));
        				
        			},
        			error:function(){
        				alert("系统错误");
        			}
        	};
        	$("#txx").ajaxSubmit(option);
        }
      
      //将 头像信息入库
    	function saveTX(res){
    		 $.ajax({
    			    type:"post",
    			    url:"${pageContext.request.contextPath}/saveTX.tq",
    			    data:{txImg:res,uid:"${user.uid }"},
    			    success:function(res){
    			      console.log(res);
    			      if(res == "true"){
    			    	  alert("头像上传成功！");
    			      }else{
    			    	  alert("头像上传失败");
    			      }
    			    },
    			    error:function(res){
    			      alert(res);
    			    }
    			  })
    	}
    	

    </script>

</body>
</html>